<template>
  <div>
    <div>
      <div class="page-title">
          <span>用户管理</span>
          <a id="back_a"  @click="back()">返回上一页</a>
      </div>
    </div>
    <el-form :model="userForm" :rules="$rules.userForm" ref="userForm"  label-width="120px"  v-loading="userForm.loading">
      <el-row type="flex" class="row-bg">
        <el-form-item label="头像:" prop="headImg">
          <el-upload action="javascript:;"
                     :show-file-list="false"
                     :before-upload="beforeCoverImgUpload"
                     :http-request="uploadSinglePic">
            <el-tooltip v-if="userForm.headImg" effect="dark" content="点击修改图片" placement="bottom">
              <div class="coverImg" :style="`background-image:url('${userForm.headImg}')`"></div>
            </el-tooltip>
            <i v-else class="el-icon-plus uploadIcon"></i>
          </el-upload>
        </el-form-item>
      </el-row>

      <el-row type="flex" class="row-bg">
        <el-col :span="8">
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="userForm.mobile"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" class="row-bg">
        <el-col :span="8">
          <el-form-item label="客户公司名称" prop="nickName">
            <el-input v-model="userForm.nickName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" class="row-bg">
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="saveUser()">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
    export default {
        name:'UserEditor2',
        data() {
            return {
                isEdit:false,
                userForm: {
                    nickName:'',headImg:'',mobile:'',loading:false,
                    userId:0
                }
            }
        },
        methods: {
            beforeCoverImgUpload(file) {
                if (file.type === "image/png" || file.type === "image/jpeg") {
                    return true;
                }
                this.$message.error("头像只能是JPG或PNG格式!");
                return false;
            },
            uploadSinglePic(f) {
                this.$api.file(f.file).then(d => {
                    if (d.data.code !== 0) {
                        this.$message.error(d.data.msg);
                        return;
                    }
                    d = d.data.data;
                    this.userForm.headImg=d;
                });
            },
            back(){
                this.$router.push({name:'UserList'});
            },
            saveUser(){
                this.$refs.userForm.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    this.userForm.loading=true;
                    let params = this.userForm;
                    this.$api.saveUser(params).then(response=>{
                        let result = response.data;
                        if(result.code==0){
                            this.$message({  type: 'success',message: '保存成功!'});
                            this.$router.push({name:'UserList'});
                        }else{
                            this.$message({  type: 'error',message:result.msg});
                        }
                        this.userForm.loading=false;
                    });
                });
            }
        },
        mounted() {
            let params = this.$route.params;
            if(params&&params.userId){
                this.$api.userInfo(params).then(response=>{
                    let result = response.data;
                    if(result.code==0){
                        this.userForm =  result.data;
                        this.userForm.userId = params.userId;
                    }
                });
            }
        },
        created() {

        }
    }
</script>

<style lang="less">
  .coverImg {
    width: 100px;
    height: 100px;
    border:1px solid #ddd;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
    border-radius: 50%;
    overflow:hidden;
  }
  .uploadIcon {
    border: 1px dotted rgb(196, 196, 196);
    border-radius: 50%;
    font-size: 30px;
    width:100px;
    height: 100px;
    line-height: 100px;
  }
  .el-form-item__error{
    width: 200px;
  }
</style>
